<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <!-- 头部搜索项 -->
      <FormItem :form_column="form_column" :queryParams="queryParams" @handleQuery="handleQuery" @resetQuery="resetQuery" />
    </el-form>
    <el-row :gutter="10" class="mb8">
      <!-- 次按钮项 -->
      <ButtonItem :button="button" ref="button" @handleMethods="handleMethods" />
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- 表格展示 -->
    <Table :tableTitle="column" :tableData="housingList" :pagination="pagination" @getList="getList" @handleSelectionChange="handleSelectionChange" :mutiSelect="true">
      <div slot="operate">
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click.native.prevent="handleDetail(scope.row)">
              详情
            </el-button>
            <el-button size="mini" type="text" @click.native.prevent="handleUpdate(cope.row)">
              修改
            </el-button>
            <el-button size="mini" type="text" @click.native.prevent="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </div>
    </Table>
  </div>
</template>

<script>
import FormItem from '../components/formItem'
import Table from '../components/table'
import ButtonItem from '../components/buttonItem'
export default {
  name: "tenant",
  dicts: ['sys_user_sex'],
  components: { FormItem, Table, ButtonItem },
  data() {
    return {
      column: [],
      form_column: [
        { title: '姓名', props: 'xm', type: 'input', placeholder: '请输入地址', width: '150px' },
        { title: '身份证号', props: 'sfzh', type: 'select', placeholder: '请选择是否已租', width: '150px', dict: 'sys_yes_no' },
        { title: '性别', props: 'xb', type: 'select', placeholder: '请选择状态', width: '150px' },
        { title: '联系方式', props: 'lxfs', type: 'select', placeholder: '请选择组件范围', width: '150px' },
        { title: '籍贯(省市)', props: 'jgss', type: 'select', placeholder: '请选择级别', width: '150px' },
        { title: '籍贯(区县)', props: 'jgqx', type: 'select', placeholder: '请选择类型', width: '150px', dict: [] },
        { title: '租户', props: 'zh', type: 'select', placeholder: '请选择层数', width: '150px', dict: [] },
        { title: '房屋', props: 'fw', type: 'select', placeholder: '请选择面积', width: '150px', dict: [] },
      ],
      button: ['新增', '修改', '删除', '导出'],
      loading: true,
      ids: [],
      showSearch: true,
      housingList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        xm: null,
        sfzh: null,
        xb: null,
        lxfs: null,
        jgss: null,
        jgqx: null,
        zh: null,
        fw: null,
      },
    };
  },
  created() {
    this.initTable()
    this.getList();
  },
  methods: {
    initTable() {
      let that = this
      this.column = [{
        label: '序号', prop: 'xh', render: (h, params) => {
          return h('span', params.index + that.pagination.pageSize * (that.pagination.pageNum - 1) + 1)
        }
      },
      { label: '身份证号', prop: 'sfzh', },
      { label: '姓名', prop: 'xm' },
      {
        label: '性别', prop: 'xb', render: (h, params) => {
          console.log(params)
          return h('dict-tag', {
            props: {
              options: this.dict.type.sys_user_sex,
              value: params.row.xb
            },
          })
        }
      },
      { label: '联系方式', prop: 'lxfs' },
      { label: '籍贯（省市）', prop: 'jg' },
      { label: '籍贯（区县）', prop: 'jg' },
      { label: '状态', prop: 'zt' },
      { label: '现租', prop: 'xz' },
      ]
    },
    /** 查询列表接口 */
    getList() {
      this.housingList = [{ sfzh: '130428200008270317', xm: '姓名', xb: 0 }]
      this.pagination.total = this.housingList.length
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId)
      this.$refs.button.single = selection.length != 1
      this.$refs.button.multiple = !selection.length
    },
    /**次按钮更多操作 */
    handleMethods(name) {
      switch (name) {
        case '新增':
          break;
        case '修改':
          break;
        case '删除':
          break;
        case '导出':
          break;
      }
    },
    //**详情操作 */
    handleDetail(row) { },
    /** 修改操作 */
    handleUpdate(row) { },
    /**删除操作 */
    handleDelete(row) { }
  }
};
</script>